<template>
  <div>
    <business-table :businessTableData="businessTableData"/>
    <div class="col-5" v-loading="loading">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
        <el-form-item label="违约金比例（%）" prop="illegal_rate">
          <el-input v-model="ruleForm.illegal_rate" placeholder="请输入违约金比例 1等于1%"></el-input>
        </el-form-item>
        <el-form-item label="">
          <span style="color: #666666">例如：100等于100%，1等于1%</span>
        </el-form-item>
        <el-form-item class="bt">
          <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      businessTableData: {
        //需要显示组件
        componentType: {
          title: true,//CommonTitle 组件是否显示
          tabs: true,//CommonTabs 组件是否显示
          table: false,//CommonTable 组件是否显示
          dialog: false,//CommonDialog 组件是否显示
        },
        //组件需要的接口和初始化方法名
        interfaceName: {
          init: '',//初始化接口名称
          initMethodName: 'initData',//初始化方法名 默认初始化名称
          add: '',//新增接口名称
          edit: '',//修改接口名称
          del: '',//删除接口
          status: '',//修改状态名称
          oneData: '',//读取一条接口名称
        },
        //CommonTitle组件数据
        titleProp: {
          name: '违约金设置',//标题名称
          class: '',//class名称
          operate: []
        },

        //CommonTabs组件数据
        tabsProp: {
          active: '1',//默认打开是什么状态 如未审核，已审核，全部的话是20000
          class: '',//class名称
          keywords: '',//搜索的值
          stretch: false,//标签的宽度是否自撑开 是 true 否 false
          tabsClick: 'tabsClick', //点击tabs方法名
          searchClick: '',// 搜索方法名 业务组件方法名固定
          heightSearchClick: '',//高级搜索点击确定 业务组件方法名固定
          inputShow: false,//搜索框是否显示 true 是 false 否
          heightShow: false,//是否有高级搜索 true 是 false 否
          heightSelectShow: false,//高级搜索是否默认下拉出来 true 是 false 否
          tabsSwitchField: 'status',//切换状态字段
          //tabs 标题
          tabsTitleProp: [{
            show: true,
            label: '违约金设置', //名称
            name: '1',//状态 全部是20000
            total: 0, //总数
          }],
          //高级搜索字段
          heightSearchProp: [],
          //高级搜索的值
          heightSearchData: {},
        },
      },
      loading: true,
      ruleForm: {
        illegal_rate: '',//违约金比例
      },
      rules: {
        illegal_rate: [
          {required: true, message: '请输入违约金比例', trigger: 'blur'},
        ],
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      this.$commodity1Query().then((result) => {
        this.ruleForm.illegal_rate = result.illegal_rate;
        this.loading = false;
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data={
            illegal_rate:this.ruleForm.illegal_rate
          }
          this.loading = true;
          this.$commodity1Edit(data).then(() => {
            this.$message.success('修改成功');
            this.initData();
          })
          //
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
